<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./readComics.css" />
    <title>Document</title>
  </head>
  <body class="dark">
    <div id="fullscreenElement">
      <!-- <header class="headerDisplayBar">
        <span id="siteName">看漫画</span>
        <span id="title">标题</span>
      </header> -->
      <header class="headerFloatBar">
        <span id="siteName">看漫画</span>
        <span id="title"></span>
        <span
          class="sizeBtn"
          id="enterFullscreenButton"
          onclick="setFullscreen()"
          >全屏</span
        >
        <span class="separator">|</span>
        <span class="sizeBtn" onclick="resize(1)">一屏一页</span>
        <span class="separator">|</span>
        <span class="sizeBtn" onclick="resize(2)">一屏两页</span>
        <span class="separator">|</span>
        <span class="sizeBtn" onclick="resize(3)">一屏三页</span>
        <button onclick="scrollAuto()">自动滚动</button>
        <button onclick="minusSpeed()" style="cursor: pointer">-</button>
        <span id="speed" style="color: white">3</span>
        <button onclick="addSpeed()" style="cursor: pointer">+</button>
        <button onclick="backToUp()">回到最上方</button>
      </header>
      <div id="content" onmouseenter="hideFloatBar()">
        <div id="directory"></div>
        <div id="picViewArea">
          <div id="imgBox"></div>
          <div id="bigImgBox" onclick="hideImg()">
            <img id="bigImg" />
          </div>
        </div>
      </div>
      <footer class="footerDisplayBar" onmouseenter="showFloatBar()">
        展开工具栏
      </footer>
      <footer class="footerFloatBar">
        <span onclick="switchDirectory()">目录</span>
        <span onclick="switchTheme()">开关</span>
      </footer>
    </div>
  </body>
  <script>
    const minusSpeed = () => {
      let speedEle = document.getElementById("speed");
      let speed = +speedEle.innerText;
      speed -= 1;
      speedEle.innerText = speed;
    };
    const addSpeed = () => {
      let speedEle = document.getElementById("speed");
      let speed = +speedEle.innerText;
      speed += 1;
      speedEle.innerText = speed;
    };
    // 递归生成目录
    function createDirectory(obj, ele) {
      let keys = Object.keys(obj);
      const ul = document.createElement("ul");
      ele.appendChild(ul);
      if (keys.length === 1 && keys[0] === "images") {
        return;
        // 什么也不做
      } else {
        for (let key of keys) {
          const li = document.createElement("li");
          li.innerHTML = `<span>${key}</span>`;
          li.onclick = (e) => {
            e.stopPropagation();
            picViewArea.scrollTo(0, 0);
            const title = document.getElementById("title");
            title.innerHTML = key;
            if (obj[key]?.images) {
              const imgBox = document.getElementById("imgBox");
              imgBox.classList.add(".img-1-column");
              imgBox.innerHTML = "";
              for (let src of obj[key]?.images) {
                const div = document.createElement("div");
                let img = document.createElement("img");
                img.src = src;
                img.classList.add("img");
                img.ondblclick = (e) => {
                  e.preventDefault();
                  bigImgBox.style.display = "flex";
                  bigImg.src = src;
                };
                div.appendChild(img);
                imgBox.appendChild(div);
              }
            } else {
              // 清空imageBox
              const imgBox = document.getElementById("imgBox");
              imgBox.innerHTML = "";
            }
          };
          ul.appendChild(li);
          if (JSON.stringify(obj[key]) !== "{}") {
            createDirectory(obj[key], li);
          }
        }
      }
    }

    fetch("images.json", {
      headers: {
        "content-type": "application/json",
      },
      method: "GET",
      credentials: "include",
    })
      .then((response) => response.json())
      .then((data) => {
        // 递归加上active属性
        // function addActive(data) {
        //   const keys = Object.keys(data);
        //   for (let key of keys) {
        //     data[key].active = false;
        //   }
        // }
        // addActive(data);
        console.log(data); // 在这里可以处理读取到的 JSON 数据
        const imgBox = document.getElementById("imgBox");
        const bigImgBox = document.getElementById("bigImgBox");
        const bigImg = document.getElementById("bigImg");
        const directory = document.getElementById("directory");
        const ul = document.createElement("ul");
        ul.id = "directoryUl";
        createDirectory(data, ul);
        directory.appendChild(ul);
      });
    // .catch((error) => {
    //   console.error("Error:", error);
    // });
    // 全屏
    function setFullscreen() {
      const fullscreenElement = document.getElementById("fullscreenElement");
      if (fullscreenElement.requestFullscreen) {
        fullscreenElement.requestFullscreen();
      } else if (fullscreenElement.mozRequestFullScreen) {
        // Firefox
        fullscreenElement.mozRequestFullScreen();
      } else if (fullscreenElement.webkitRequestFullscreen) {
        // Chrome, Safari 和 Opera
        fullscreenElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      } else if (fullscreenElement.msRequestFullscreen) {
        // IE/Edge
        fullscreenElement.msRequestFullscreen();
      }
    }

    // 调整大小
    function resize(size) {
      const imgBox = document.getElementById("imgBox");
      imgBox.className = "";
      if (size === 1) {
        imgBox.classList.add("img-1-column");
      }
      if (size === 2) {
        imgBox.classList.add("img-2-column");
      }
      if (size === 3) {
        imgBox.classList.add("img-3-column");
      }
    }
    // 隐藏图片
    function hideImg() {
      const bigImgBox = document.getElementById("big-img-box");
      bigImgBox.style.display = "none";
    }
    // 隐藏目录
    function switchDirectory() {
      const directory = document.getElementById("directory");
      const directoryUl = document.getElementById("directoryUl");
      const picViewArea = document.getElementById("picViewArea");
      if (directory.style.width == "0px") {
        directory.style.width = "280px";
        picViewArea.style.width = "calc(100% - 280px)";
        directoryUl.style.display = "block";
      } else {
        directory.style.width = "0px";
        picViewArea.style.width = "100%";
        directoryUl.style.display = "none";
      }
    }
    // 切换主题
    const switchTheme = () => {
      if (document.body.className === "dark") {
        document.body.className = "light";
      } else {
        document.body.className = "dark";
      }
    };
    // 显示悬浮框
    const showFloatBar = () => {
      // const headerFloatBar =
      //   document.getElementsByClassName("headerFloatBar")?.[0];
      const footerFloatBar =
        document.getElementsByClassName("footerFloatBar")?.[0];
      const footerDisplayBar =
        document.getElementsByClassName("footerDisplayBar")?.[0];
      // headerFloatBar.style.top = "0px";
      footerFloatBar.style.bottom = "0px";
      footerDisplayBar.style.opacity = "0";
    };
    const hideFloatBar = () => {
      // const headerFloatBar =
      //   document.getElementsByClassName("headerFloatBar")?.[0];
      const footerFloatBar =
        document.getElementsByClassName("footerFloatBar")?.[0];
      const footerDisplayBar =
        document.getElementsByClassName("footerDisplayBar")?.[0];
      // headerFloatBar.style.top = "-55px";
      footerFloatBar.style.bottom = "-44px";
      footerDisplayBar.style.opacity = "1";
    };
    let intervalId;
    let scrollPosition = 0;
    const scrollSpeed = 10;
    const picViewArea = document.querySelector("#picViewArea");
    const imgBox = document.querySelector("#imgBox");
    const scrollAuto = (str) => {
      const scrollDistance = +document.getElementById("speed").innerText; // 每次滚动的距离
      scrollPosition = picViewArea.scrollTop;
      if (intervalId) {
        intervalId = clearInterval(intervalId);
      } else {
        intervalId = setInterval(() => {
          scrollPosition += scrollDistance;
          picViewArea.scrollTo(0, scrollPosition);

          // 当你想要停止滚动时，清除这个间隔
          if (scrollPosition >= imgBox.scrollHeight) {
            intervalId = clearInterval(intervalId);
          }
        }, scrollSpeed);
      }
    };

    const backToUp = () => {
      picViewArea.scrollTo(0, 0);
    };
    // 为元素添加keydown事件监听器
    document.addEventListener("keydown", function (event) {
      // 检查按下的键是否是空格键
      if (event.key === " " || event.keyCode === 32) {
        event.preventDefault();
        scrollPosition = picViewArea.scrollTop;
        // 空格键被按下，执行相应的操作
        console.log("空格键被按下");
        scrollAuto();
      }
    });
  </script>
</html>
